<template>
  <div class=" bg-light-50 w-full h-full absolute">

    <div class="body-card">
      <div class="w-full h-5 bg-red-50"></div>
      <div class="w-full h-auto m-auto flex flex-wrap">
        ########<i class="iiiii"></i>$$$$$$$$$$$$$$
        <transition-group name="card" tag="button">
          <template v-for="item in tabList" :key="item" v-if="!title.visible">
            <button 
              @click="clickB(item)"
              class="m-auto rounded-md bg-[#B4766B] w-40 text-light-600 p-2 m-10">
              {{item.name}}
            </button>
          </template>
        </transition-group>
        <transition name="title">
          <span 
            v-if="title.visible"
            @click="clickB({})"
            class="titleSpan m-auto rounded-md bg-[#B4766B] w-full text-light-600 p-2 m-10"
          >{{title.text}}</span>
          
        </transition>
        <div v-if="title.visible" class="w-4/5 h-23rem m-auto">
          <router-view></router-view>
        </div>
      </div>
    </div>

    
  </div>
</template>


<script setup lang="ts">

import { onBeforeMount,onBeforeUpdate, onMounted, onUpdated, onActivated, onDeactivated ,  reactive, ref } from 'vue';
import { useRouter } from 'vue-router';
import componentDrag from '../components/componentDrag.vue';

const router = useRouter();
const tabList = ref([
  { name: '水印', path: '/', visible: true, select: false },
  { name: 'three.js机器人移动', path: 'threeRubot', visible: true, select: false },
  { name: '组件拖拽', path: 'componentDrag', visible: true, select: false },
  { name: 'css动画', path: 'cssAnimation', visible: true, select: false },
  { name: '测试1', path: '/', visible: true, select: false },
  { name: '测试2', path: '/', visible: true, select: false },
  { name: '测试3', path: '/', visible: true, select: false },
  { name: '测试4', path: '/', visible: true, select: false },
]);
const title = reactive({
  text: '',
  visible: false
});
console.log('created');
onBeforeMount(() => {
  console.log('onBeforeMount ');
});
onMounted(() => {
  console.log('onMounted');
});
onBeforeUpdate(() => {
  console.log('onBeforeUpdate');
});
onUpdated(() => {
  console.log('onUpdated');
});
onActivated(() => {
  console.log('onActivated');
});
const clickB = (row: any) => {
  title.visible = !title.visible;
  title.text = row.name ? row.name : '';
  router.push({ path: row.path });
};
</script>


<style>
a {
  /* color: #42b983; */
}

label {
  margin: 0 0.5em;
  font-weight: bold;
}

code {
  background-color: #eee;
  padding: 2px 4px;
  border-radius: 4px;
  color: #304455;
}

.lg\:bg-red-500 {
  color: #eee;
}

@media (min-width: 768px) {
  .toon {
    background-color: aquamarine;
    color: #000;
    width: 200px !important;
    height: 200px !important;
  }
}

@media (min-width: 1024px) {
  .toon {
    background-color: aquamarine;
    color: #eee;
    width: 200px !important;
    height: 200px !important;
  }
}

.body-card {
  background: no-repeat center center;
  /* background-image: url('../../public/id=43603576.png'); */
  background-size: 100% 100%;
  height: 100%;
  width: 100%;
  overflow: hidden;
  background-color: #DACBB4;
}

.card-move, /* 对移动中的元素应用的过渡 */
.card-enter-active {
  transition: all 0.1s ease;
  transition-delay: 0.4s;

  position: absolute;

}

.card-enter-to {
  opacity: 0;
}
.card-leave-active {
  transition: all 0.8s ease;

  /* 确保将离开的元素从布局流中删除
  以便能够正确地计算移动的动画。 */
  position: absolute;

}

.card-leave-to {
  /* transform: translateX(20px); */
  opacity: 0;
}

.title-leave-active {
  animation: bounce-in 0.5s;

}
/* .title-leave-to {
  animation: bounce-in 0.5s ;
} */

@keyframes bounce-in {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.25);
  }
  100% {
    transform: scale(0);
  }
}
.iiiii:before {
  content: "\e6e0";
}
</style>
